import { IThemeColor } from '../../../../../type/index';

interface IData {
  name: string;
  value: number;
}

export const initLevelScale = (echarts: any, dom: HTMLElement, valueData: number[], labelData: string[], themeColor: IThemeColor) => {
  let dataList = [] as any;

  labelData.forEach((item, index) => {
    dataList.push({
      name: item,
      value: valueData[index],
    });
  });

  const charts = echarts.init(dom);
  charts.setOption({
    // , '#4b71c4'
    color: ['#bfc4cc', '#f96468', '#ff8257', '#ffc761', '#16a273'],
    // color: ['#f96468', '#e6a23c', '#ffc761', '#89cc79'],
    title: {
      text: '各分数等级数量比例',
      textStyle: {
        color: themeColor.font,
        fontSize: 16,
        fontWeight: 'normal',
      },
      padding: [16, 0, 0, 16],
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      type: 'scroll',
      top: 'bottom',
      left: 'center',
      align: 'left', //字在图例的左边或右边【left/right】
      orient: 'horizontal', //图例方向【horizontal/vertical】
      icon: 'roundRect', //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
      // itemGap: 25,
      pageIconColor: themeColor.font,
      pageTextStyle: {
        color: themeColor.font,
      },
      textStyle: {
        fontSize: 14,
        color: themeColor.font,
      },
      itemStyle: {
        borderWidth: 0,
      },
    },
    series: [
      {
        name: '各分数等级数量比例', //用于tooltip
        type: 'pie',
        center: ['50%', '50%'], //调节饼图位置 [x,y]
        radius: ['30%', '60%'],
        minAngle: 6,
        itemStyle: {
          borderRadius: 4,
        },
        label: {
          color: themeColor.font,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
          },
        },
        data: dataList,
      },
    ],
  });
};
